// @import '@tau/theme-23926/variables.css';
// @import '@tau/theme-23926/dist/next.var.css';
@import '@alifd/theme-23927/variables.css';
@import '@alifd/theme-23927/dist/next.var.css';
@import 'assets/iconfont/iconfont.css';

body {
  -webkit-font-smoothing: antialiased;
  --tag-size-s-text-size: 12px;

  // 使1rem为10px
  font-size: 62.5%;


  // 全局滚动条样式
  * {
    $scroll-bar-width: 3px;

    &::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: $scroll-bar-width;
      /*高宽分别对应横竖滚动条的尺寸*/
      height: $scroll-bar-width;
    }

    &::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: $scroll-bar-width;
      box-shadow: inset 0 0 $scroll-bar-width $color-brand1-6;
    }

    &::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      box-shadow: inset 0 0 $scroll-bar-width rgba(0, 0, 0, 0.1);
      border-radius: $scroll-bar-width;
      background: $color-fill1-3;
    }
  }

  .next-shell-brand {

    section.next-shell-main {

      // 左侧导航菜单样式
      .next-shell-aside.next-shell-navigation {
        padding: 0;

        .next-nav.next-ver.next-right {
          .next-nav-item:before {
            left: 0px;
          }

          .next-nav-item {
            i.iconfont {
              margin-right: 10px;
            }
          }
        }

        ul.next-menu {
          // 开启滚动
          height: calc(100vh - 52px - 20px);
          overflow-y: auto;

          .next-nav-sub-nav-item,
          .next-menu-item {
            font-weight: 500;
          }

          .next-menu-item {
            opacity: 0.7;
          }

          .next-menu-item.next-selected {
            opacity: unset;
          }
        }
      }

      // 内容区全局样式
      .next-shell-sub-main {

        height: calc(100vh - 52px);

        .next-shell-content-inner {
          height: 100%;
          background-color: $color-white;
        }
      }
    }
  }

  .next-overlay-wrapper {
    .next-drawer {
      .next-drawer-header {
        // Drawer标题没有字体粗细的主题配置,这里覆盖
        font-weight: 500;
        position: sticky;
        top: 0;
        background-color: $color-white;
        z-index: 10;
      }
    }

    .next-drawer-right {
      .next-drawer-body {}
    }
  }


  // 通用panel + content布局
  .page-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100vh - var(--shell-brand-header-height, 52px) - (var(--shell-brand-content-paddingTop, 12px) * 2));
    overflow-y: auto;
    overflow-x: hidden; // 子容器必须自行管理横向滚动

    .action-panel {
      position: sticky;
      top: 0px;
      flex: 1;
      z-index: 10;
      background-color: $color-white;
      padding: var(--s-5, 20px);
    }

    .content {
      // 单独内容区
      // height: calc(100% - 10px);
      height: 100%;
      padding: var(--s-5, 20px);
    }

    .content::before {
      height: 10px;
    }
  }

  .page-container-2 {
    // 左右分区内容区
    height: calc(100vh - var(--shell-brand-header-height, 52px) - (var(--shell-brand-content-paddingTop, 12px) * 2));
    display: flex;
    flex-direction: row;
    overflow-y: auto;
    overflow-x: hidden; // 子容器必须自行管理横向滚动

    .left-panel {
      position: sticky;
      top: 0px;
      min-width: 100px;
      height: 100%;
      overflow: auto;
    }

    .main-content {
      flex: auto;
      display: flex;
      flex-direction: column;
      height: 100%;

      .action-panel {
        position: sticky;
        top: 0px;
        flex: 1;
        z-index: 10;
        background-color: $color-white;
        padding: var(--s-5, 20px);
      }

      .content {
        // 单独内容区
        // height: calc(100% - 10px);
        height: 100%;
        padding: var(--s-5, 20px);
      }

      .content::before {
        height: 10px;
      }
    }
  }



  // next组件样式重载要放在body下面，以便shell-content和dialog，drawer同时使用
  .next-table.next-table-medium.only-bottom-border {
    th {
      text-align: center;
      white-space: nowrap;

      .next-table-cell-wrapper {
        padding: 12px 8px;
      }
    }

    td {
      // 覆盖主题中的表格线样式
      border-bottom: 1px solid rgba(220, 222, 227, 0.4);

      .next-table-cell-wrapper {
        padding: 12px 8px;
      }
    }
  }

  .next-table.next-table-small {
    td {
      border: 0;
    }
  }

  .next-switch .next-switch-children span {
    // 覆盖主题中switch small模式文字折行
    white-space: nowrap;
  }

  form.next-form .next-responsive-grid .next-form-item-control .next-date-picker2,
  form.next-form .next-responsive-grid .next-form-item-control .next-select {
    width: 100%;
  }

  .sub-title {
    position: relative;
    margin-bottom: 24px;
    padding-left: 10px;
  }

  .sub-title::before {
    position: absolute;
    top: 10%;
    bottom: 0;
    left: 0;
    width: 2px;
    background-color: $color-data1-2;
    height: 80%;
    content: '';
  }

  form.next-inline .next-responsive-grid>div {

    // border: 1px solid rgba(240, 240, 240, 1);
    // 定义预览表单样式
    .next-form-item.next-form-preview {
      .next-form-item-label {
        border: 1px solid rgba(240, 240, 240, 1);
        margin-top: -1px;
        // border-left: 0;
        width: calc(100% + 25px);
        text-align: left;
        padding: 4px 6px;
        background-color: rgba(250, 250, 250, 1);
      }

      .next-form-item-control {
        border: 1px solid rgba(240, 240, 240, 1);
        // border-left: 0;
        border-top: 0;
        width: calc(100% + 25px);
        padding: 4px 6px;
        min-height: 37px;
        .next-form-preview { // 避免大文本撑高，内部需要设置text-overflow: ellipis
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }

  form .next-responsive-grid {
    padding-right: 25px;
  }


  .next-menu .next-menu-icon-arrow.next-icon {
    font-size: 8px;

  }

  .next-menu .next-menu-icon-arrow.next-icon:before,
  .next-menu .next-menu-icon-arrow.next-icon .next-icon-remote {
    width: 8px;
    font-size: 8px;
  }


  // 覆盖@tau-ui中的样式
  .tau-role-panel,
  .tau-ui-dialog {
    .next-card {
      border: 0;
    }
  }

  // 树形控件
  .next-tree.next-node-block {
    .next-tree-node-inner {
      i.iconfont {
        margin-right: 8px;
        color: $color-text1-2;
      }
    }

    .next-tree-node-inner.next-selected { //FIXME 使用主题样式配置
      // background-color: $color-brand1-6;
      background-color: rgb(88, 136, 201);
      color: $color-white;
      i.iconfont {
        color: inherit;
      }
      .next-tree-switcher-icon {
        color: inherit;
      }
    }

  }

  .next-dialog {
    border-radius: 8px;
    .next-message.next-large .next-message-title {
      font-size: 18px;
    }
  }

}


